<template>
  <u-popup :show="state.show"  bgColor="transparent" mode="center"  :closeOnClickOverlay="false"  closeable @close="close">
    <view class="Model-wapper">
		<view class="title-Model ss-flex ss-col-enter">
		<!-- <image src="@/static/icon_zjmmicon.png" mode=""></image> -->
		投诉
		</view>
		<view class="tip">
			联系方式
		</view>
		<view class="content">
			<!-- <u-textarea v-model="value1" placeholder="请输入内容" ></u-textarea> -->
				<u-input v-model="state.form.phone" placeholder="请输入联系方式" ></u-input>
		</view>
		<view class="tip">
			投诉内容
		</view>
		<view class="content">
			<u-textarea v-model="state.form.content" placeholder="请输入内容" ></u-textarea>
			<!-- 	<u-code-input v-model="state.password" mode="box" size="80rpx" dot></u-code-input> -->
		</view>
		<view class="button-wapper ">
			<button class="button" @tap="confirm">确认</button>
		</view>
    </view>
  </u-popup>
  
 <!-- <u-keyboard ref="uKeyboard" mode="number" :dotDisabled="true" borderColor="transparent"  :show="state.show" hairline :tooltip="false" @backspace="backspace"  @change="valChange"></u-keyboard> -->
</template>

<script setup>
  import { computed, watch, ref, reactive, unref, nextTick } from 'vue';
  import LC from '@/LC'

 let is_set_pwd=computed(()=>LC.$store('money').withdrawalWay.is_set_pwd);
 
  let state=reactive({
	  show:false,
	  form:{
		  content:'',
		  phone:''
	  },
	  password:'',

  })


  
  function close() {
    emit('close');
	 state.password=''
    state.show = false;
  }
  
  const valChange = (val) => {
	  if(val.length>5){
		  return
	  }
    // 将每次按键的值拼接到value变量中，注意+=写法
    state.password += val;
    
  };
  function open() {
    state.show = true;
  }
  const backspace = () => {
    // 删除value的最后一个字符
    if (  state.password.length) {
        state.password =   state.password.substr(0,   state.password.length - 1);
    }
    console.log(  state.password);
  };
  
  function confirm() {
	 //  if(state.password.length<6){
		
		  
		//   return 
	 //  }
	 LC.$api.user.complaint(state.form)
	 	.then((
	 		res
	 		) => {
	 	if(res.code) state.show = false,uni.$u.toast('提交成功');
	 	
	 	})
	   
	// emit('confirm',state.password);
   
  }
  function cancel() {
	  emit('cancel');
  
  }
  let emit = defineEmits(['open', 'close', 'confirm','cancel']);
  defineExpose({ close, open });
</script>

<style lang="scss" scoped >
	::v-deep .u-code-input__item{
		border: none !important;
		margin-right: 17rpx;
		background: #F3F5F7;
		border-radius: 15rpx;
	}
	
	::v-deep .u-border{
		border-radius: 16rpx;
		border: 2rpx solid #EAEAEA;
	}
	.button {
		
	
		height: 86rpx;
		flex-shrink: 0;
		margin-top: auto;
		background-color: #FC5652;
		border-radius: 15rpx;
		font-weight: 400;
		font-size: 31rpx;
		width: 100%;
		line-height: 86rpx;
		color: #fff;
	
		margin-top: 52rpx;
	
		&.dis {
			background-color: #CCCCCC;
		}
	
		&::after {
			display: none;
		}
	
	
	}
	
.Model-wapper{
	width: 649rpx;
	min-height: 466rpx;
	border-radius: 38rpx;
	padding:25rpx 34rpx;
	box-sizing: border-box;
	background: #FFFFFF;
	
}
	
.content{
	margin-top:36rpx;
	font-size: 28rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	color: rgba(0,0,0,0.65);
	line-height: 44rpx;
}
.button-wapper{
	
}
.tip{
	
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 23rpx;
	color: #999999;
	line-height: 32rpx;
	margin-top: 23rpx;
}
.title-Model{
	image{
		width: 56rpx;
		height:64rpx;
		margin-right:15rpx;
	}
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 27rpx;
	color: #333333;
	line-height: 38rpx;
	
}
</style>
